<template>
  <div class="container" style="padding: 0px">
    <el-card class="box-card">
      <div class="myCardDiv" style="overflow: auto; height: 80px">
        <el-steps class="crumbList" :align-center="true">
          <el-step v-for="item in monitorData" :key="item.id" :description="item.description" icon="el-icon-check" :status="item.status"></el-step>
        </el-steps>
      </div>
    </el-card>

    <el-card class="my-box-card">
<!--      <div class="block" style="overflow-y: auto; height: 300px">-->
<!--        <el-timeline>-->
<!--          <el-timeline-item-->
<!--            v-for="(item, index) in auditHistoryData"-->
<!--            :key="index"-->
<!--            :type="item.type"-->
<!--            :timestamp="item.orderTime">-->
<!--            <h3>{{item.auditUserName}}</h3>-->
<!--            <p style="line-height: 20px; padding-top: 5px">-->
<!--              {{item.auditDesc}}-->
<!--            </p>-->
<!--          </el-timeline-item>-->
<!--        </el-timeline>-->
<!--      </div>-->
      <div style="border: 1px solid #ccc;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;position: relative;">
        <el-table
          ref="singleTable"
          :data="auditHistoryData"
          tooltip-effect="dark"
          @row-contextmenu="rowContextmenu"
          height="300"
          style="width: 100%">
          <el-table-column
            width="50"
            align="center"
            label="序号">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="200"
            prop="name"
            align="left"
            :show-overflow-tooltip="showOverflowTooltip"
            label="环节名称">
          </el-table-column>
          <el-table-column
            width="100"
            prop="currentStatusName"
            align="center"
            :show-overflow-tooltip="showOverflowTooltip"
            label="审核状态">
          </el-table-column>
          <el-table-column
            width="100"
            prop="auditUserName"
            align="center"
            :show-overflow-tooltip="showOverflowTooltip"
            label="审核人">
          </el-table-column>
          <el-table-column
            width="150"
            prop="arriveTime"
            align="center"
            label="到达时间">
          </el-table-column>
          <el-table-column
            width="150"
            prop="auditTime"
            align="center"
            label="审核时间">
          </el-table-column>
          <el-table-column
            prop="auditDesc"
            align="left"
            :show-overflow-tooltip="showOverflowTooltip"
            label="审核意见">
          </el-table-column>
        </el-table>
      </div>
    </el-card>

  </div>
</template>

<script>
  import '@/styles/newstyle.scss'
  const store = require('store')

  export default {
    name: 'wfProcessInstanceView',
    data() {
      return {
        loading: false,
        showOverflowTooltip: true,
        queryArgs: {},
        monitorData: [],
        auditHistoryData: [],
        stepSpace: '10'
      }
    },
    props: ['workitemInfo'],
    created() {
      this.getWfProcessMonitor()
      this.getWfProcessAuditHistory()
      // this.fetchData()
    },
    watch: {
      // asyncData() { // 普通的watch监听通的watch监听
      //   this.fetchData()
      //   // console.log(this.asyncData)
      // }
    },
    components: {
    },
    // 画面刚进入method
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.fetchData()
      })
    },
    mounted() {
      // this.handleReset()
    },
    methods: {
      rowClick() {
        // 行单击事件
      },
      cellClick(row, column, cell, event) {
        // 列单击事件
      },
      rowContextmenu(row, column, e) {
        // 右键菜单
        window.event.returnValue = false
      },
      fetchData() {
        // this.loading = true
        // this.$store.dispatch('WfBizCategoryTree', this.queryArgs).then(res => {
        //   this.treeData = res.data
        //   this.loading = false
        // }).catch((err) => {
        //   console.log(err)
        // })
      },
      getWfProcessMonitor() {
        let args = {}
        args.procInstanceId = this.workitemInfo.procInstanceId
        this.$store.dispatch('WfProcessMonitor', args).then(res => {
          let records = res.data
          let monitorData = []
          records.forEach((item, index) => {
            let monitorRecord = {}
            monitorRecord.id = item.actId
            monitorRecord.description = item.actName
            monitorRecord.status = 'wait'
            const actInsCurStatus = item.actInsCurStatus
            if (actInsCurStatus === '2') {
              monitorRecord.status = 'success'
            } else if (actInsCurStatus === '1') {
              monitorRecord.status = 'process'
              let auditPeopleList = item.auditPeopleList
              let auditUserStr = ''
              auditPeopleList.forEach((pitem, pindex) => {
                if (pitem.name) {
                  auditUserStr += ',' + pitem.name
                }
              })
              if (auditUserStr) {
                monitorRecord.description = item.actName + '（' + auditUserStr.substring(1) + '）'
              }
            }
            monitorData.push(monitorRecord)
          })
          this.monitorData = monitorData
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      getWfProcessAuditHistory() {
        let args = {}
        args.businessId = this.workitemInfo.busiId

        if (this.workitemInfo.busiTypeId) {
          args.busiTypeId = this.workitemInfo.busiTypeId
        } else {
          args.busiTypeId = ''
        }
        this.$store.dispatch('WfProcessAuditHistory', args).then(res => {
          let data = res.data
          // let records = []
          // data.forEach((item, index) => {
          //   let record = {}
          //   record.orderTime = item.orderTime
          //   record.type = 'info'
          //   const currentStatus = item.currentStatus
          //   if (currentStatus === 1) {
          //     record.type = 'primary'
          //   } else if (currentStatus === 2) {
          //     record.type = 'warning'
          //   } else if (currentStatus === 3) {
          //     record.type = 'danger'
          //   } else if (currentStatus === 4) {
          //     record.type = 'success'
          //   }
          //   record.name = item.name
          //   record.auditUserName = item.auditUserName
          //   record.auditDesc = item.auditDesc
          //
          //   records.push(record)
          // })
          this.auditHistoryData = data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>
<style scoped>
  .crumbList {

  }
  .myCardDiv >>> .el-step__description {
    margin: 0 !important;
  }
  .myCardDiv >>> .el-step__icon-inner[class*=el-icon]:not(.is-status) {
    font-weight: 700 !important;
    font-size: 13px !important;
  }
  .my-box-card >>> .el-card__body {
    padding: 5px;
  }
</style>
